import { CoverView, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { GStyleSheet } from '@/utils/DarkMode';
import { useEffect, useCallback, useRef, useState } from 'react';
import withPressWhenLoggedIn from '../withPressWhenLoggedIn';

interface ActionButtonProps {
  children?: React.ReactNode;
  onPress?: () => void;
  style?: any;
}

const dstyles = GStyleSheet.create({
  container: {
    position: 'fixed',
    zIndex: 9999,
    width: 50,
    height: 50,
    borderRadius: 25,
    boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.09), 0 6px 12px 0 rgba(0, 0, 0, 0.03)",
  },
  button: {
    width: 50,
    height: 50,
    overflow: 'hidden',
    borderRadius: 25,
    backgroundColor: '#3478f5',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const ActionButton: React.FC<ActionButtonProps> = ({ children, onPress, style }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);
  const startPosition = useRef({ x: 0, y: 0 });
  const touchStart = useRef({ x: 0, y: 0 });
  const screenSize = useRef({ width: 0, height: 0 });
  const styles = dstyles.useDynamicStyle();

  useEffect(() => {
    // Get screen size
    const systemInfo = Taro.getSystemInfoSync();
    screenSize.current = {
      width: systemInfo.windowWidth,
      height: systemInfo.windowHeight,
    };
    // Set initial position to bottom right
    setPosition({
      x: systemInfo.windowWidth - 60,
      y: systemInfo.windowHeight - 140,
    });
  }, []);

  const handleTouchStart = useCallback((e) => {
    // Don't set isDragging immediately
    startPosition.current = position;
    touchStart.current = {
      x: e.touches[0].clientX,
      y: e.touches[0].clientY,
    };
  }, [position]);

  const handleTouchMove = useCallback((e) => {
    const currentX = e.touches[0].clientX;
    const currentY = e.touches[0].clientY;
    
    // Calculate movement distance
    const deltaX = currentX - touchStart.current.x;
    const deltaY = currentY - touchStart.current.y;
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

    // If not dragging yet, check if we should start dragging
    if (!isDragging && distance > 10) {
      setIsDragging(true);
    }

    if (!isDragging) return;

    let newX = startPosition.current.x + deltaX;
    let newY = startPosition.current.y + deltaY;

    // Keep button within screen boundaries
    newX = Math.max(0, Math.min(newX, screenSize.current.width - 50));
    newY = Math.max(0, Math.min(newY, screenSize.current.height - 50));

    setPosition({ x: newX, y: newY });
  }, [isDragging]);

  const handleTouchEnd = useCallback(() => {
    setIsDragging(false);
  }, []);

  const handleClick = useCallback((e) => {
    if (!isDragging && onPress) {
      onPress();
    }
  }, [isDragging, onPress]);

  
  return (
    <View
      style={{
        ...styles.container,
        ...{
          left: position.x,
          top: position.y,
        },
        ...style,
      }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onClick={handleClick}
    >
      <View style={styles.button}>
        {children}
      </View>
    </View>
  );
};

export default withPressWhenLoggedIn(ActionButton); 